<template>
	<div class="xySwiper">
		<!-- 切换按钮 -->
		<div :class="hasPre ? '' : 'disabled'" class="leftArrow" @click="pre">
			<i class="el-icon-arrow-left"></i>
		</div>
		<div :class="hasNext ? '' : 'disabled'" class="rightArrow" @click="next">
			<i class="el-icon-arrow-right"></i>
		</div>
		<!-- 顶部轮播图 -->
		<div class="xySwiper-top">
			<div class="xy-top__wrapper" ref="topWrap">
				<div class="topItem" v-for="(item, index) in videoList" :key="index">
					<div class="content">
						<video class="playVideo" controls height="100%" width="100%" :src="item.url"></video>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部缩略图 -->
		<div class="xySwiper-bottom">
			<div class="xy-bottom__wrapper" ref="bottomWrap">
				<div
					@click="switchCard(index, item)"
					class="bottomItem"
					:class="item.active ? 'active' : ''"
					v-for="(item, index) in videoList"
					:key="index"
				>
					<div class="content">
						<video height="100%" width="100%" :src="item.url"></video>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
 
<script>
export default {
	name: 'XySwiper',
	model: {
		prop: 'currentIndex',
		event: 'change'
	},
	props: {
		list: {
			type: Array,
			default: () => []
		},
		currentIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			index: '' /* 当前索引 */,
			videoList: [] /* 视频列表 */,
			hasPre: false /* 存在上一项 */,
			hasNext: false /* 存在下一项 */
		};
	},
	watch: {
		list: {
			handler: function (val) {
				this.videoList = val;
			},
			deep: true,
			immediate: true
		},
		currentIndex: {
			handler: function (val) {
				this.index = val;
			},
			deep: true,
			immediate: true
		},
		index(val) {
			this.judgeStatus();
			this.judgeScroll();
			this.stopVideo();
		}
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			this.judgeStatus();
		},

		// 上一张
		pre() {
			if (this.hasPre) {
				this.index--;
				this.$emit('change', this.index);
				this.videoList.map((item, index) => {
					if (index === this.index) {
						item.active = true;
					} else {
						item.active = false;
					}
				});

				this.scrollTop();
			}
		},

		// 下一张
		next() {
			if (this.hasNext) {
				this.index++;
				this.$emit('change', this.index);
				this.videoList.map((item, index) => {
					if (index === this.index) {
						item.active = true;
					} else {
						item.active = false;
					}
				});

				this.scrollTop();
			}
		},

		// 切换卡片
		switchCard(val) {
			if (val === this.index) {
				return;
			}

			this.videoList.map((item, index) => {
				if (index === val) {
					item.active = true;
					this.index = index;
					this.scrollTop();
				} else {
					item.active = false;
				}
			});
		},

		// 轮播图滚动
		scrollTop() {
			let top = this.$refs.topWrap;
			top.style.transform = `translateX(${-800 * this.index}px)`;
		},

		// 判断当前是否有上一张或者下一张
		judgeStatus() {
			this.hasPre = true;
			this.hasNext = true;
			this.videoList.map((item, index) => {
				if (item.active) {
					index === 0 && (this.hasPre = false);
					index === this.videoList.length - 1 && (this.hasNext = false);
				}
			});
		},

		// 判断缩略图是否需要滚动
		judgeScroll() {
			let top = this.$refs.bottomWrap;

			if (this.index > 3) {
				top.style.transform = `translateX(${-240 * (this.index - 3)}px)`;
			} else {
				top.style.transform = `translateX(0)`;
			}
		},

		// 暂停所有视频
		stopVideo() {
			const videoList = document.querySelectorAll('.playVideo');

			for (let i = 0; i < videoList.length; i++) {
				videoList[i].pause();
			}
		}
	}
};
</script>
 
<style lang="scss">
.xySwiper {
	margin-top: 20px;
	font-size: 13px;
	width: 100%;
	height: 780px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;

	.leftArrow,
	.rightArrow {
		position: absolute;
		top: 165px;
		border-radius: 50%;
		padding: 5px;
		cursor: pointer;

		i {
			font-size: 28px;
			color: #fff;
		}

		&:hover {
			transform: scale(1.1);

			i {
				font-weight: bold;
			}
		}
	}

	.leftArrow.disabled,
	.rightArrow.disabled {
		cursor: not-allowed;
		transform: inherit;

		i {
			color: #888;
			font-weight: inherit;
		}
	}

	.leftArrow {
		left: 222px;
	}

	.rightArrow {
		right: 222px;
	}

	.xySwiper-top {
		width: 800px;
		overflow: hidden;
	}

	.xySwiper-bottom {
		width: 1200px;
		overflow: hidden;
		margin-top: 20px;
	}

	.xy-top__wrapper {
		display: flex;
		transition: transform 0.3s;
	}
	.xy-bottom__wrapper {
		display: flex;
		transition: transform 0.3s;
	}

	.topItem {
		min-width: 800px;
		height: 400px;
		box-sizing: border-box;
		padding: 20px;
		background-color: #000;
		display: flex;
		justify-content: center;
		align-items: center;

		.content {
			height: 400px;
			width: 800px;
		}
	}

	.bottomItem {
		height: 160px;
		box-sizing: border-box;
		padding-right: 10px;
		opacity: 0.7;
		min-width: 240px;
		cursor: pointer;

		.content {
			height: 160px;
			width: 100%;
		}
	}

	.bottomItem.active {
		opacity: 1;
	}
}

body {
	background-color: #0f2128;
}
</style>